<template>
	<div class="userInfo">
		<h4>密码修改</h4>
		<div class="resdata">
			<el-form ref="pwForm" :model="pwForm" :rules="pwFormRules" size="small" label-width="110px">
				<el-form-item prop="pw" label="新密码">
					<el-input type="password" v-model="pwForm.pw"></el-input>
				</el-form-item>
				<el-form-item prop="pw2" label="确认密码">
					<el-input type="password" v-model="pwForm.pw2"></el-input>
				</el-form-item>
				<el-form-item>
                    <el-button type="primary" @click="setPassWord('pwForm')">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { resetpw } from '@/api';
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
            if (this.pwForm.pw2 !== '') {
                this.$refs.pwForm.validateField('pw2');
            }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.pwForm.pw) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
			pwForm: {
                pw: '',
                pw2: '',
            },
            pwFormRules: {
                pw: [
                    { validator: validatePass }
                ],
                pw2: [
                    { validator: validatePass2 }
                ],
            }
		};
	},
	mounted(){
        this.user_id = this.croUser.user_id || null;
	},
	computed: {
		...mapState([
			'croUser',
		]),
	},
	methods: {
		...mapMutations([
			'OUT_LOGIN',
		]),
		setPassWord(formName){
			if(!this.croUser){
				this.OUT_LOGIN();
				this.$router.push('/login');
				return
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let para = Object.assign({}, this.pwForm);
                    para.user_id=this.user_id;
                    resetpw(para).then(res=>{
                        if(res.data){
                            this.resetForm(formName);
                            this.$message.success(res.msg);
                        }else if(res.tologin) {
                            this.OUT_LOGIN();
                            this.$router.push('/login');
                        }else {
                            this.$message.error(res.msg);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
		},
        // 重置 
        resetForm(formName){
            this.$refs[formName].resetFields();
        },
	}
};
</script>
<style scoped lang="scss">
.userInfo {
	h4 {
		font-size: 14px;
		font-weight: 700;
		line-height: 40px;
	}
	.resdata {
		width: 500px;
		margin: 30px auto;
	}
}
</style>
